<template>
  <div class="about">
    <at-button v-if="debug" @click="showData(chartData)"> <i class="icon icon-align-center" />  this page data </at-button>
    <div id="myChart242" :style="{width: '800px', height: '550px'}"></div>
     <input
      class="hdbtn"
      type="button"
      id="btn888"
      @click="downloadImpByChart()"
      value="保存为图片"
    />
  </div>
</template>
<style scoped>
</style>
<script>
import { mapState,mapMutations } from "vuex";
export default {
  name: "hello",
  data() {
    return {
      chartData:[],
      title:'',
    };
  },
  computed:{
    ...mapState(['cookies','debug'])
  },
  mounted() {
    this.updateCookies()
    this.chartData = this.cookies.chart242.data
    this.title = this.cookies.chart242.title
    this.drawLine();
  },
  methods: {
    ...mapMutations(['updateCookies']),
    drawLine() {
      // 基于准备好的dom，初始化echarts实例
      let myChart242 = this.$echarts.init(document.getElementById("myChart242"));

      var option = {
        title: {
          text: this.title ,
          // subtext: "纯属虚构",
          x: "center",
          textStyle: {
            fontSize:'26',
            fontFamily:'FZXBSJW'
          }
        },
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
          orient: "vertical",
          left: "right",
          top:'15%'
        },
        series: [
          {
            name: "涉纪村社占比",
            type: "pie",
            radius: "65%",
            center: ["45%", "50%"],
            data: this.chartData,
            itemStyle: {
              normal: {
                label: {
                  show: true,
                  // formatter: "{b}   ({d}%)"
                  formatter: function(data){ return data.name  + '  ('+data.percent.toFixed(1)+"%)";} ,
                },
                labelLine: { show: true }
              }
            }
          }
        ],
        // formatter:function(data){ return data.percent.toFixed(1)+"%";} 
      };

      // 绘制图表
      myChart242.setOption(option);
    },
    showData(jsondata){
      this.$Modal.alert({content:jsondata});
    },

    downloadImpByChart(){
      this.common.saveChart(this.$echarts.getInstanceByDom(document.getElementById('myChart242')),this.cookies.chart242.title)
    }
  }
};
</script>
<style scoped>
.about {
 padding-top: 2rem;
}
#myChart242 {
  margin: 0 auto;
}
</style>